<template>
    <div class="imported-this-year flex space-between align-items-center pr16">
        <img class="light-img" :src="require('../../assets/image/circle.png')" alt="">

        <div class="icon-iimg">
            <img :src="require('../../assets/image/circle.png')" alt="">
        </div>

        <div class="title">
            <span>本年累计进口额</span>
        </div>

        <div class="price flex">
            <span class="num italic-text">{{ startCount.toFixed(2) }}</span>
            <span class="unit">亿美元</span>
        </div>
        <div class="rank flex flex-column align-items-center justify-center">
            <span class="rank-text">同比上年</span>
            <div class="percent flex align-items-center">
                <span class="num italic-text">8.13%</span>
                <img :src="require('../../assets/image/down.png')" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {ref, Ref, watch} from "vue";

    let startCount:Ref<number> = ref(0);
    let endCount:Ref<number> = ref(0);
    let numberTime:Ref<any> = ref(null)

    setInterval(() => {
        endCount.value+=6;
    }, 1000);

    watch(endCount, () => {
        numberAnimation();
    });

    function numberAnimation(){
        if(numberTime.value != null){
            startCount.value = endCount.value;
            clearInterval(numberTime.value);
            numberTime.value = null;
        }

        let step:any = (endCount.value - startCount.value) / 10;

        numberTime.value = setInterval(() => {
            if(startCount.value < endCount.value){
                startCount.value += step;
            }else{
                clearInterval(numberTime.value);
                numberTime.value = null;
            }
        }, 100);
    }
</script>

<style lang="scss" scoped>
.imported-this-year {
    position: relative;
    background: linear-gradient(90deg, #080f1c, #0a2f58, #1670c5, #0a2f58, #080f1c);
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .light-img{
        position: absolute;
        width: 2rem;
        height: 2rem;
        animation: leftToRight 3s  infinite;
        opacity: 0.5;
    }

    .icon-iimg{
        img{
            width: 4rem;
            height: 4rem;
        }
    }

    .title{
        font-size: 0.75rem;
        color: #c8e1f7;
        white-space: nowrap;
    }

    .price{
        align-items: baseline;

        .num{
            font-size: 1.5625rem;
            color: #d9e7f7;
        }

        .unit{
            font-size: 0.75rem;
            white-space: nowrap;
            color: #a3b3c5;
            margin-left: 0.5rem;
        }
    }

    .rank{
        height: 100%;

        img{
            width: 1.25rem;
            height: 1.251rem;
        }

        .rank-text{
            font-size: 0.75rem;
            color: #91adca;
        }

        .percent{
            .num{
                color: #cddaec;
                font-size: 1.125rem;
            }

            img{
                margin-left: 0.25rem;
            }
        }
    }

    @keyframes leftToRight {
        0% { 
            left: 0;
        }

        100% { 
            left: calc(100% - 2rem);
        }
    }
}
</style>